<template>
  <div>
    <div class="m-d-charts" v-loading="loading" id="tendency">
    </div>
  </div>
</template>

<script>
  import api from '../api/api'
  import echarts from 'echarts/lib/echarts'
  // 引入饼状图
  import 'echarts/lib/chart/pie';
  import 'echarts/lib/chart/line';
  import 'echarts/lib/component/title';
  import 'echarts/lib/component/legend';
  import 'echarts/lib/component/toolbox';
  import 'echarts/lib/component/markPoint';
  import 'echarts/lib/component/tooltip';

  export default {
    name: "trend-echarts",
    props: ['keywordId', 'timeRange'],
    data() {
      return {
        loading: true,
        fromDateString: '',
        toDateString: '',
        tendencyNum: []
      }
    },
    mounted() {
      this.tendency = echarts.init(document.getElementById('tendency'));
      this.getData();
      this.resize();
    },
    methods: {
      resize() {
        // echarts自适应页面
        const self = this;
        setTimeout(() => {
          window.onresize = function () {
            self.tendency.resize()
          }
        }, 20)
      },
      getData() {
        api.Polarity({keywordId: this.keywordId, fromDateString: this.fromDateString, toDateString: this.toDateString})
          .then(res => {
            this.loading = false;
            this.tendencyNum = [];
            this.tendencyNum.push({
              name: '正面',
              value: res['positive'].length
            },{
              name: '中性',
              value: res['neutral'].length
            },{
              name: '负面',
              value: res['negative'].length
            });
            this.initData()
          }).catch(e => {
          console.log(e);
        });
      },
      initData() {
        const optionOne = {
          toolbox: {
            show: true,
            itemSize: 20,
            right: 20,
            feature: {
              dataZoom: {show: false},
              dataView: {show: false},
              magicType: {show: false},
              restore: {show: false},
              saveAsImage: {}
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            right: 60,
            top: 'middle',
            itemWidth: 16,
            itemHeight: 16,
            align: 'left',
            data: ['正面', '中性', '负面'],
            textStyle: {
              color: '#333',
              fontSize: 16
            }
          },
          series: [
            {
              name: '极性分析',
              type: 'pie',
              radius: ['35%', '55%'],
              center: ['40%', '50%'],
              color: ['#23A9FA', '#2B6DE3', '#22D8EF'],
              label: {
                normal: {
                  formatter: '{b}\n{d}%'
                }
              },
              data: this.tendencyNum
            }
          ]
        };
        this.tendency.setOption(optionOne);
      }
    },
    watch: {
      keywordId() {
        this.tendency.clear();
        this.loading = true;
        this.getData()
      },
      timeRange() {
        if (this.timeRange == null) {
          this.fromDateString = '';
          this.toDateString = ''
        } else {
          this.fromDateString = this.timeRange[0];
          this.toDateString = this.timeRange[1];
        }
        this.tendency.clear();
        this.loading = true;
        this.getData()
      }
    }
  }
</script>

<style scoped lang="less">

</style>
